<template>
  <div class="join-con" style="background:#14003D;position: absolute;height:100%;">
    <div class="bannerbox">
      <!-- <img class="backimg" src="../../assets/images/newimg/z12@2x.png" alt="" />-->
    </div>
    <div class="full">
      <img src="../../assets/images/Fourimg/titleykyd.png" alt="">
    </div>

    <div class="form-con">
      <form action="">
        <ul class="biao box_siz">
          <li>
            <img src="../../assets/images/Fourimg/fshmc@2x.png" alt="">
            <input type="text" v-model="formInfo.businessName" placeholder="请输入商户名称">
          </li>
          <li>
            <img src="../../assets/images/Fourimg/fdlkb@2x.png" alt="">
            <input type="text" v-model="formInfo.people" placeholder="请输入联系人">
          </li>
          <li>
            <img src="../../assets/images/Fourimg/fdh(2)@2x.png" alt="">
            <input type="text" v-model="formInfo.phone" placeholder="请输入手机号">
          </li>
          <li>
            <img src="../../assets/images/Fourimg/fdz(1)@2x.png" alt="">
            <input type="text" v-model="formInfo.address" placeholder="请输入地址">
          </li>
        </ul>
        <div style="text-align:center">
          <button class="btn" @click="subInfo">提交信息</button>
        </div>
      </form>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'FjoinIn',
    data () {
      return {
        formInfo: {
          businessName: '',
          people: '',
          phone: '',
          address: ''
        }
      }
    },
    methods: {
      subInfo () {
        var that = this
        var info = this.formInfo
        if (info.businessName === '') {
          alert('请输入商户名称')
        } else if (info.people === '') {
          alert('请输入联系人')
        } else if (info.phone === '') {
          alert('请输入手机号')
        } else {
          var data = that.formInfo
          this.$http({
            method: 'get',
            url: 'http://api.wangjianxin.top/insertBusinessApply?businessName=' + data.businessName + '&people=' + data.people + '&phone=' + data.phone + '&address=' + data.address
            // data: that.formInfo
          }).then(function (res) {
            // that.shareData = res
            console.log(res)
            if (res.status === 200) {
              alert('提交成功')
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .backimg {
    width: 7.5rem;
    height: 100vh;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -99;
  }
  /* 客满多 */

  .full {
    text-align: center;
    padding: 20% 0 10%;
  }

  .full img {
    width: 80%;
  }
  /* form表单 */

  .form-con {
    width: 80%;
    width: 7.08rem;
    height: 7.19rem;
    margin: 0 auto;
    /*border-radius: .2rem;*/
    /*background: rgba(204,204,204,.1);*/
    /*border:.01rem solid #F4C08E;*/
  }

  .biao {
    padding: 0.3rem;
  }

  .biao li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: .3rem;
    /*margin-left: 0.6rem;*/
    position: relative;
  }

  .biao li img {
    width: .37rem;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
  }

  .biao li input {
    width: 5.57rem;
    height: .7rem;
    background: transparent;
    border: 1px solid rgb(154, 135, 191);
    border-radius: 0.35rem;
    margin-left: .3rem;
    font-size: .24rem;
    color: #fff;
    padding-left: .8rem;
  }
  /* 提交按钮 */

  .btn {
    width: 3.65rem;
    height: 0.8rem;
    border: 0;
    background:rgb(154, 135, 191);
    border-radius: 0.06rem;
    font-size: 0.30rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    text-align: center;
    line-height: 0.82rem;
    color:#fff;
    font-size: 0.32rem;
    line-height: 0.8rem;
  }
</style>
